<template>
	    <view class="list"  v-for="(item, index) in userData" :key="index">
      <view class="list_top">
        <view class="head_box">
          <uni-icons class="list_head" type="contact" color="#C4D2DF" size="55"></uni-icons>
          <text class="list_name">{{ item.name }}</text>
        </view>
        <text class="list_time">{{ new Date(item.time).toLocaleString() }}</text>
      </view>
      <view class="list_addres"> {{item.area}}{{item.areas}}{{ item.areadetail }}</view>
      <view class="list_btn">
        <text class="list_add">意向区域:{{ item.areas }}</text>
        <text class="list_price"> 意向价格: <text class="prices">{{ item.prices }}</text></text>
        <view class="list_icon">
          <view @click="gotoxinxi(item.name)"> <uni-icons color="#FB676A" type="chat-filled" size="30"></uni-icons></view>
          <button @click="gotuHpone"> <uni-icons color="#FB676A" type="phone-filled" size="30"></uni-icons></button>
          
        </view>
      </view>
    </view>
</template>

<script setup>
import {renting} from '../../stores/index'
import {storeToRefs} from 'pinia'
const useRenting = renting()
const {userData} = storeToRefs(useRenting)
// 跳转到信息页面
const gotoxinxi = (name)=>{
  uni.navigateTo({
    url:'../../subpkg/metre/metre?name='+name
  })
}
// 拨打电话
const gotuHpone = ()=>{
	uni.makePhoneCall({
  phoneNumber: '10086' //仅为示例，并非真实的电话号码
})
}
</script>

<style lang="scss" scoped>
.list{
  color: rgb(86, 86, 86);
  background: #fff;
  padding: 0 40rpx;
  margin-bottom: 30rpx;
  .list_top{
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    .list_time{
      font-size: 24rpx;
    }
    .head_box{
      width: 200rpx;
      display: flex;
      justify-content: space-between;
      align-content: center;

    }
    align-content: center;
    .list_head{

    }
    .list_name{
      line-height: 100rpx;
    }
    .list_time{
      line-height: 100rpx;
    }
  }
  .list_addres{
    height: 90rpx;
    margin-top: 20rpx;
    border-bottom: #ccc solid 2rpx;
  }
  .list_btn{
    height: 80rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    .list_icon{
      display: flex;
      view,button{
        width: 70rpx;
        height: 70rpx;
        background: #FDDFE1;
        border-radius: 60rpx;
        display: flex;
        justify-content: center;
        margin-left: 20rpx;
        uni-icons{
         line-height: 70rpx;
        }
      }
    }
  }
}
</style>